<template>
  <div>
    <h3>{{ a }}</h3>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <!-- <button @click="changeName">点我变化</button> -->
  </div>
</template>
<script setup lang="ts">
import { withDefaults } from "vue";
import { Persons } from "../types";

// 接收传过来的数据
// defineProps(["a", "list"]);

// 接收数据的同时，保存起来
// let x = defineProps(["a", "list"]);

// 接收数据并且 + 限制类型 <>括号里面要写对象，因为你可能有多个要接收的值
// defineProps<{ list: Persons }>();

//接收数据 + 限制类型 + 限制必要性 + 指定默认值, withDfaults配置默认值。第二个参数写对象，因为你传可以有多个，每个对象对应一个函数，函数的返回值就是默认值。这里返回一个数组，因为你可能有多个person的数据
withDefaults(defineProps<{ list: Persons }>(), {
  list: () => [{ id: "01", name: " 康师傅", age: 33 }],
});
</script>

<style scoped>
h3 {
  font-size: 30px;
}
</style>
